<template>
  <div class="app-container">
    <el-form
      ref="objectForm"
      :model="object"
      :rules="objectRules"
      label-width="150px"
    >
      <el-row>
        <el-row>
          <el-col :span="12">
            <div
              style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px"
              class="font16 color-333"
            >
              基本信息
            </div>
          </el-col>
        </el-row>
        <el-row class="mt-20">
          <el-row :gutter="gutter">
            <el-col :span="span">
              <el-form-item label="姓名：" prop="name">
                <el-input v-model="object.name" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="手机号：">
                <el-input v-model="object.buildingName" />
              </el-form-item>
            </el-col>
            <el-col :span="span" />
          </el-row>
          <el-row :gutter="gutter">
            <el-col :span="span">
              <el-form-item label="微信号：" prop="weixinAccount">
                <el-input v-model="object.weixinAccount" />
              </el-form-item>
              <!-- <el-form-item label="城市">
              <el-select v-model="object.cityName" placeholder="城市" >
                <el-option v-for="(item, index) in informationTypes" :key = "index" :label= "item.object.name" :value="item.id"/>
              </el-select>
            </el-form-item> -->
            </el-col>
            <el-col :span="span">
              <el-form-item label="职位：" prop="position">
                <el-input v-model="object.position" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <!-- 推荐楼盘 添加 -->
        <el-row :gutter="24">
          <el-row>
            <el-col :span="12">
              <div
                style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px"
                class="font16 color-333"
              >
                推荐楼盘
              </div>
            </el-col>
            <el-col :span="12" class="text-right">
              <el-button
                icon="el-icon-circle-plus-outline"
                class="border-4C7FD7 color-4C7FD7"
                style="padding: 5px 10px;"
                @click="showDialog1"
                >新增</el-button
              >
            </el-col>
          </el-row>
          <el-row class="mt-15">
            <el-table
              :data="buildingTypes"
              :header-cell-style="{ background: '#F1F3F5', color: '#666666' }"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column align="center" label="序号">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="楼盘名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.object.buildingName }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="楼盘地址">
                <template slot-scope="scope">
                  <span>{{ scope.row.object.address }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="65">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="updateDialog(scope.row, '编辑')"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="removeBuildingInfo(1, scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-row>
        <!-- 我的照片 -->
        <el-row :gutter="24">
          <el-row>
            <el-col :span="12">
              <div
                style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px"
                class="font16 color-333"
              >
                我的照片
              </div>
            </el-col>
            <el-col :span="12" class="text-right">
              <el-button
                icon="el-icon-circle-plus-outline"
                class="border-4C7FD7 color-4C7FD7"
                style="padding: 5px 10px;"
                @click="showBuildingDialog(2)"
                >新增</el-button
              >
            </el-col>
          </el-row>
          <el-row class="mt-15">
            <el-table
              :data="object.realEstateHighLights"
              :header-cell-style="{ background: '#F1F3F5', color: '#666666' }"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column align="center" label="序号">
                <template slot-scope="scope">
                  <span>{{ scope.row.object.sellingPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="图片名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.object.address }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="图片">
                <template slot-scope="scope">
                  <span>{{ scope.row.object.photo }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="65">
                <template slot-scope="scope">
                  <el-button type="text" @click="deleteIndex(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-row>
      </el-row>
      <!--添加标签-->
      <el-row :gutter="24" class="mt-20">
        <el-row>
          <el-col :span="12">
            <div
              style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px"
              class="font16 color-333"
            >
              个性标签
            </div>
          </el-col>
          <el-col :span="12" class="text-right" />
        </el-row>
        <el-row class="mt-15">
          <el-tag
            v-for="(tag, index) in tag"
            :key="index"
            :disable-transitions="false"
            closable
            @close="handleClose(index)"
          >
            {{ tag.name }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="tagValue"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else size="small" @click="showInput"
            >+添加标签</el-button
          >
        </el-row>
      </el-row>
    </el-form>
    <div class="gpo-btn text-center p30 mt-20" style="padding-top: 20px">
      <el-button
        :loading="btnLoading"
        type="primary"
        size="big"
        style="width: 120px;"
        @click="onSubmit"
        >保存</el-button
      >
      <el-button style="width: 120px;" size="big" @click="onBack"
        >返回</el-button
      >
    </div>
    <!-- 展示所有项目 -->
    <!-- 推荐楼盘新增 -->
    <el-dialog
      :visible.sync="dialogFormVisible1"
      :title="formTitle"
      width="650px"
    >
      <el-row>
        <el-form label-width="90px">
          <el-row :gutter="10">
            <el-col :span="16">
              <el-form-item label="楼盘名称：">
                <el-input v-model="object.buildingName" placeholder="姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="text-center">
              <el-button
                type=""
                class="border-4C7FD7 color-4C7FD7"
                icon="el-icon-search"
                @click="searchList"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          v-loading="listLoading"
          :data="buildingTypes"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼盘名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.buildingName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼盘地址" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.address }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div slot="footer" class="dialog-footer text-center">
        <el-button :loading="btnLoading" type="primary" @click="confirm"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 新增我的照片 -->
    <el-dialog
      :visible.sync="dialogFormVisible2"
      :title="formTitle"
      width="650px"
    >
      <el-row>
        <el-form
          label-width="90px"
          ref="objectForm"
          :model="propertyAlbum"
          :rules="objectRules"
        >
          <el-form-item label="图片：" prop="pictureName">
            <single-image
              :images="fileList"
              :time="false"
              @success="setHightImage"
            />
          </el-form-item>
          <el-form-item label="图片名称：" prop="pictureName">
            <el-input v-model="propertyAlbum.pictureName" />
          </el-form-item>
          <el-form-item label="图片分类：" prop="pictureClassification">
            <el-input v-model="propertyAlbum.pictureClassification" />
          </el-form-item>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button
          :loading="btnLoading"
          type="primary"
          @click="addBuildingInfo(3)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 编辑dialog -->
    <el-dialog :visible.sync="dialogFormVisible" :title="message" width="550px">
      <el-form
        ref="objectForm"
        :model="object"
        :rules="objectRules"
        label-width="130px"
      >
        <el-row>
          <el-form-item label="楼盘名称: " prop="name">
            <el-input v-model="object.buildingName" />
          </el-form-item>

          <el-form-item label="楼盘地址" prop="phone">
            <el-input v-model="object.position" />
          </el-form-item>
          <el-form-item label="微信号：" prop="wechatID">
            <el-input v-model="object.weixinAccount" />
          </el-form-item>
          <el-form-item label="职位：" prop="position">
            <el-input v-model="object.position" />
          </el-form-item>
          <el-form-item label="团队名称：" prop="TeamName">
            <el-input v-model="object.TeamName" />
          </el-form-item>
          <el-form-item label="所属项目公司：" prop="projectCompany">
            <el-input v-model="object.projectCompany" />
          </el-form-item>
          <el-form-item label="关联楼盘：" prop="responsibleBuilding">
            <el-input v-model="object.responsibleBuilding" />
          </el-form-item>
          <el-form-item label="账户状态：" prop="status">
            <el-radio-group v-model="object.status">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button
          :loading="btnLoading"
          type="primary"
          @click="onSubmit(message)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import mixin from '@/views/fy/project/rules/building'
import SingleImage from "@/components/Upload/singleImage";
// import { addCallCard } from '@/api/adviser'
import card from "./rules/card.js";
export default {
  name: "Cratebuilding",
  components: { SingleImage },
  mixins: [card],
  data() {
    return {
      // 图片文件
      fileList: [],
      propertyAlbum: [],
      propertyAlbum: {
        serialNumber: "",
        pictureList: [],
        pictureName: "",
        pictureClassification: "",
      },

      dialogVisible: false,
      gutter: 20,
      span: 8,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      formTitle: "我的相册",
      inputVisible: false,
      tagValue: "",
      tag: [],
      buildingTypes: [],
      listQuery: {
        level: "building",
        buildingName: "",
        pageNum: 1,
        pageSize: 10,
      },
      object: {
        backgroundImg: "",
        browseNum: 0,
        company: "",
        faceImg: "",
        id: 0,
        likeNum: 0,
        memberId: "",
        name: "",
        phone: "",
        // 我的相册
        photo: "",
        position: "",
        recommendRoom: "",
        signature: "",
        status: "",
        title: "",
        type: 0,
        video: "",
        weixinAccount: "",
      },
    };
  },
  created() {
    console.log("111");
    console.log(this.object);
    // 初始化楼盘
    let query1 = {
      level: "building",
      pageSize: 10,
      pageNum: 1,
    };
    query1 = this.setListQuery(query1);
    this.searchListAll(query1).then((res) => {
      this.buildingTypes = res.data.list;
      console.log(this.buildingTypes);
    });
  },
  methods: {
    // 确认
    confirm() {
      const _this = this;
      this._.forEach(_this.multipleSelection, function(selected, index) {
        // _this.object.projectList.push({
        //     'serialNumber': index+1,
        //     'buildingName': selected.object.buildingName,
        //     'averagePrice': selected.object.sellingPrice,
        //     'address': selected.object.address,
        //     'pictureUrl': selected.object.pictureList
        // })
        _this.buildingTypes.push(selected);
      });
      this.dialogFormVisible1 = false;
    },
    showDialog1() {
      this.dialogFormVisible1 = true;
      // this.searchList()
      this.formTitle = "推荐楼盘";
    },
    showDialog2() {
      this.dialogFormVisible1 = true;
      // this.searchList()
      this.formTitle = "我的相册";
    },

    // async onSubmit() {
    //   window.console.log('111')
    //   var res = await addCallCard(this.object)
    //   console.log(res)
    // },
    // handleClose(done) {
    //   this.$confirm("确认关闭?").then(() => {
    //     done();
    //   });
    // },
    async init() {
      await this.getDateById(this.$route.params.id);
      console.log(this.object);
      this.object.this.fileList.push({
        url: "",
        name: "",
      });
    },
    showBuildingDialog(type) {
      switch (type) {
        case 1:
          // this.houseTypeInformation = this._.cloneDeep(
          //   this.houseTypeInformationCopy
          // );
          // this.dialogFormVisible1 = true;
          break;
        case 2:
          this.realEstateHighLights = this._.cloneDeep(
            this.realEstateHighLightsCopy
          );
          this.dialogFormVisible2 = true;
          break;
        case 3:
          this.propertyAlbum = this._.cloneDeep(this.propertyAlbumCopy);
          this.dialogFormVisible3 = true;
          break;
      }
    },
    // 新增消息
    addBuildingInfo(type) {
      switch (type) {
        case 1:
          this.object.houseTypeInformation.push(this.houseTypeInformation);
          // this.object.houseTypeInformation = [...new set(this.object.houseTypeInformation.push(this.houseTypeInformation))]
          this.dialogFormVisible1 = false;
          break;
        case 2:
          this.object.realEstateHighLights.push(this.realEstateHighLights);
          this.dialogFormVisible2 = false;
          break;
        case 3:
          this.object.propertyAlbum.push(this.propertyAlbum);
          this.dialogFormVisible3 = false;
          break;
      }
    },
    // 删除
    removeBuildingInfo(type, index) {
      switch (type) {
        case 1:
          this.buildingTypes.splice(index, 1);
          break;
        case 2:
          this.buildingTypes.splice(index, 1);
          break;
        case 3:
          this.buildingTypes.splice(index, 1);
          break;
      }
    },
    // 文件上传
    handleSuccess() {},
    // 新增标签
    handleClose(index) {
      this.tag.splice(index, 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      const tagValue = this.tagValue;
      if (tagValue) {
        this.tag.push({
          name: tagValue,
        });
      }
      this.inputVisible = false;
      this.tagValue = "";
    },
    // // 上传多图
    // setFloorImage(file) {
    //   const _this = this;
    //   if (file.length === 0) {
    //     this.houseTypeInformation.floorPlan = [];
    //     return;
    //   }
    //   this._.forEach(file, function(f) {
    //     _this.houseTypeInformation.floorPlan.push({
    //       url: f.imgUrl,
    //     });
    //   });
    // },
    // 上传多图
    setHightImage(file) {
      const _this = this;
      if (file.length === 0) {
        this.realEstateHighLights.pictureList = [];
        return;
      }
      this._.forEach(file, function(f) {
        _this.realEstateHighLights.pictureList.push({
          url: f.imgUrl,
        });
      });
    },
    // 上传多图
    setPictureImage(file) {
      const _this = this;
      if (file.length === 0) {
        this.propertyAlbum.pictureList = [];
        return;
      }
      this._.forEach(file, function(f) {
        _this.propertyAlbum.pictureList.push({
          url: f.imgUrl,
        });
      });
    },
  },
};
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
